import { debounce } from 'lodash-es'
import { onMounted, onUnmounted, ref } from 'vue'

export default function useResize(response?: () => void) {
  const resizeNum = ref(0)

  const outerWidth = ref(window.outerWidth)

  const outerHeight = ref(window.outerHeight)

  const isFullScreen = ref(false)

  setFullScreen()

  const eventHandler = debounce(() => {
    resizeNum.value += 1

    if (response) response()

    setTimeout(() => {
      outerWidth.value = window.outerWidth

      outerHeight.value = window.outerHeight

      setFullScreen()
    }, 250)
  }, 150)

  function setFullScreen() {
    // const doc: any = document
    // isFullScreen.value =
    // doc.fullscreenElement || doc.isFullScreen || doc.mozIsFullScreen || doc.webkitIsFullScreen
    if (window.outerHeight === screen.availHeight) {
      if (window.outerWidth === screen.availWidth) {
        //alert("全屏");
        isFullScreen.value = true
      } else {
        //alert("不是全屏");
        isFullScreen.value = false
      }
    } else {
      //alert("不是全屏");
      isFullScreen.value = false
    }
    console.log('isFullScreen.value', screen, isFullScreen.value)
  }

  // 点击按钮全屏事件
  function fullScreen() {
    const doc: any = document
    if (isFullScreen.value) {
      // 是全屏就退出全屏
      if (doc.exitFullscreen) {
        doc.exitFullscreen()
      } else if (doc.mozCancelFullScreen) {
        ;(doc as any).mozCancelFullScreen()
      } else if (doc.webkitCancelFullScreen) {
        doc.webkitCancelFullScreen()
      }
    } else {
      // 否则将页面全屏
      if (doc.requestFullscreen) {
        doc.requestFullscreen()
      }
      //FireFox
      else if (doc.mozRequestFullScreen) {
        doc.mozRequestFullScreen()
      }
      //Chrome等
      else if (doc.webkitRequestFullScreen) {
        doc.webkitRequestFullScreen()
      }
      //IE11
      else if (doc.msRequestFullscreen) {
        doc.msRequestFullscreen()
      }
    }
  }

  onMounted(() => {
    window.addEventListener('resize', eventHandler)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', eventHandler)
  })

  return { resizeNum, outerWidth, outerHeight, isFullScreen, fullScreen }
}
